import React from 'react';
import { Button } from 'antd';
import {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormUploadDragger,
} from '@ant-design/pro-form';
import { useIntl } from '../../../../.umi/plugin-locale/localeExports';
import { connect, FormattedMessage } from 'umi';

const CreateItem = (props) => {
  const { dispatch, currentUser, collection } = props;
  const intl = useIntl();

  const onFinish = (values) => {
    const formData = new FormData();
    formData.append('name', values.name);
    formData.append('description', values.description);
    formData.append('category', values.category);
    formData.append('file', values.file[0].originFileObj);
    formData.append('collectionID', collection.id);
    formData.append('userID', currentUser.id);
    dispatch({
      type: 'myCollection/addItem',
      payload: formData,
    });
    return true;
  };

  return (
    <ModalForm
      title="创建商品"
      trigger={
        <Button type="primary" size="large">
          创建商品
        </Button>
      }
      onFinish={onFinish}
    >
      <ProFormText
        name="name"
        label={<FormattedMessage id="pages.work.upload.title.label" />}
        placeholder={intl.formatMessage({ id: 'pages.work.upload.title.placeholder' })}
        rules={[
          {
            required: true,
            message: intl.formatMessage({ id: 'pages.work.upload.title.required' }),
          },
        ]}
      />
      <ProFormTextArea
        name="description"
        label={<FormattedMessage id="pages.work.upload.abstract.label" />}
        placeholder={intl.formatMessage({ id: 'pages.work.upload.abstract.placeholder' })}
        rows={4}
      />
      <ProFormSelect
        name="category"
        label={<FormattedMessage id="pages.work.upload.category.label" />}
        placeholder={intl.formatMessage({ id: 'pages.work.upload.category.placeholder' })}
        valueEnum={{
          1: '文字作品',
          2: '图片作品',
          3: '视频作品',
        }}
        rules={[
          {
            required: true,
            message: intl.formatMessage({ id: 'pages.work.upload.category.required' }),
          },
        ]}
      />
      <ProFormUploadDragger
        name="file"
        label={<FormattedMessage id="pages.work.upload.dragger.label" />}
        title={<FormattedMessage id="pages.work.upload.dragger.title" />}
        description={<FormattedMessage id="pages.work.upload.dragger.description" />}
        rules={[
          {
            required: true,
            message: intl.formatMessage({ id: 'pages.work.upload.dragger.required' }),
          },
        ]}
        max={1}
        fieldProps={
          {
            // itemRender:(node,file)=>{
            //   console.log(node)
            //   return(
            //     <div className={"ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-text"}>
            //       <div className={"ant-upload-list-item-info"}>
            //         <span className={"ant-upload-span"}>
            //           <div className={"ant-upload-text-icon"}>
            //             <LinkOutlined />
            //           </div>
            //           {file.name}
            //           {"文件类型"}
            //             <DeleteOutlined />
            //         </span>
            //       </div>
            //     </div>
            //   )
            // }
          }
        }
      />
    </ModalForm>
  );
};

export default connect(({ user, myCollection }) => ({
  collection: myCollection.collection,
  currentUser: user.currentUser,
}))(CreateItem);
